<template>
	<view :style="{ '--color': color }" class="p-bot150">
		<statusBar ref="statusbar" title="会员中心" :back="0"></statusBar>

		<view class="Vipoptions" v-if="pageData">
			<u-tabs
				:list="pageData"
				:current="current"
				:lineColor="color"
				:itemStyle="itemStyle"
				:lineWidth="24"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"
				:scrollable="false"
				keyName="vip_name"
				@click="click"
			></u-tabs>
		</view>

		<view class="rows m-top20" v-if="pageData.length">
			<view class="rows" v-for="(item, index) in pageData" :key="index">
				<u-parse :content="pageData[current].content" :domain="imgUrl" @ready="Load = false" v-if="current == index"></u-parse>
			</view>

			<!-- <view class="rows" v-if="current == 0">
				<u-parse :content="pageData[0].content" :domain="imgUrl" @ready="Load = false"></u-parse>
			</view>
			<view class="rows" v-if="current == 1">
				<u-parse :content="pageData[1].content" :domain="imgUrl"></u-parse>
			</view> -->
		</view>

		<view class="liberal_View">
			<view class="liberal d-flex a-center j-centert white" @click="show = true">
				<view class="d-flex f-column a-center" v-if="is_buy">
					<view class="d-flex a-center white size26">
						<text>立即续费{{ liberal_Txt }}</text>
						<text class="h6 m-top4">￥</text>
						<text class="size28">{{ liberal_price }}</text>
					</view>
					<text class="white h7">有效期至 {{ pageData[current].expire_at }}</text>
				</view>
				<block v-else>
					<text class="size34">{{ liberal_Txt }}</text>
					<text class="h6 m-top4">￥</text>
					<text class="size34">{{ liberal_price }}</text>
				</block>
			</view>
		</view>
		<tabBar :tab="16"></tabBar>
		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>

		<u-popup :show="show" @close="show = false" round="10" closeable>
			<view class="Warpper">
				<text class="title">支付方式</text>
				<view class="Box">
					<view class="list" :class="{ active: pay_type == 1 }" @click="pay_type = 1">
						<view class="iconfont icon-weixin color_16d size80"></view>
						<text class="color_33 size30">微信支付</text>
					</view>
					<view class="list" :class="{ active: pay_type == 2 }" @click="pay_type = 2">
						<view class="iconfont icon-a-016 color_33 size80"></view>
						<text class="color_33 size30">余额支付</text>
					</view>
				</view>

				<view class="Continue" :class="{ conActive: pay_type != 0 }" @click="playVip">支付</view>
			</view>
		</u-popup>
		<!-- 	<Load v-if="Load"></Load> -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import statusBar from '@/components/status-bar/status-bar.vue';
export default {
	components: {
		statusBar
	},
	data() {
		return {
			Load: true,
			showModal: false,
			imgUrl: this.imgUrl,
			list1: [
				{
					name: '月卡会员'
				},
				{
					name: '年卡会员'
				}
			],
			current: 0,
			itemStyle: {
				height: '36px'
			},
			activeStyle: {
				fontWeight: 'bold',
				fontSize: '30rpx',
				transform: 'scale(1.04)'
			},
			inactiveStyle: {
				transform: 'scale(1)',
				fontSize: '30rpx'
			},

			pageData: [],
			palyState: true,
			show: false,
			pay_type: 0 //1 微信支付 2余额支付
		};
	},
	onLoad() {
		this.activeStyle['color'] = this.color;
	},
	onShow() {
		this.buyVipList();
		let options = wx.getEnterOptionsSync();
		if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
			let extraData = options.referrerInfo.extraData;
			if (!extraData) return;
			if (extraData.code == 'success') {
				this.buyVipList();
			}
		}
	},
	methods: {
		buyVipList() {
			this.$http
				.get({
					url: '/goodsLessonsApi/buyVipList'
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
				});
		},
		click(e) {
			this.current = e.index;
		},

		playVip() {
			let that = this;
			if (!that.vid) return (that.showModal = true);
			if (!that.palyState) return;
			that.palyState = false;
			this.show = false;
			that.$http
				.get({
					url: '/accountPay/getVipPayInfo',
					data: {
						vip_id: that.pageData[that.current].vip_id,
						pay_type: this.pay_type
					}
				})
				.then((res) => {
					that.palyState = true;
					if (res.code != '100') return that.$Toast(res.msg);
					const result = res.data;
					if (this.pay_type == 2) return this.buyVipList();
					if (result.extraData) {
						wx.openEmbeddedMiniProgram({
							appId: result.appId,
							extraData: result.extraData
						});
					} else {
						that.$pop.getPayment(result).then((pay) => {
							that.buyVipList();
						});
					}
				});
		}
	},
	computed: {
		...mapState(['color', 'share', 'vid']),
		liberal_Txt() {
			if (!this.pageData.length) return;
			return `${this.pageData[this.current].vip_name}：`;
		},
		liberal_price() {
			if (!this.pageData.length) return;
			return `${this.pageData[this.current].vip_price}`;
		},
		is_buy() {
			if (!this.pageData.length) return;
			return this.pageData[this.current].is_buy == 1 ? true : false;
		}
	},
	onShareAppMessage() {
		let share = this.share;
		return {
			title: share.title,
			desc: share.desc,
			path: `/pages/index/index?share_v_id=${this.vid}`,
			imageUrl: share.imageUrl
		};
	}
};
</script>
<style lang="scss">
page {
	background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.Warpper {
	width: 100%;
	padding: 40rpx 40rpx 80rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.title {
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
	}

	.Box {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx 40rpx;
			border: 1px solid #f2f2f2;
			border-radius: 10rpx;
		}

		.active {
			border: 1px solid var(--color) !important;
		}
	}

	.Continue {
		width: 540rpx;
		height: 88rpx;
		background-color: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 34rpx;
		border-radius: 10rpx;
		margin-top: 80rpx;
	}

	.conActive {
		background-color: var(--color);
	}
}

.Vipoptions {
	width: 710rpx;
	margin: 0 auto;
	height: 80rpx;
}

.liberal_View {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 150rpx;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.liberal {
	color: #ffffff;
	width: 600rpx;
	height: 80rpx;
	border-radius: 40rpx;
	overflow: hidden;
	background-color: var(--color);
	z-index: 100;
}

// #ifdef MP-WEIXIN
.liberal {
	bottom: 40rpx;
}

// #endif
// #ifdef H5
.liberal {
	bottom: 140rpx;
}

// #endif
</style>
